<template>
	<view>
		<view class="swiper-wrap">
			<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
				:duration="duration">
				<swiper-item class="swiper-items">
					<image v-if='fridenInfo.cover' :src="fridenInfo.cover" mode="aspectFill"></image>
					<image v-else src="../../static/default.jpg" mode="aspectFill"></image>

				</swiper-item>

			</swiper>
			<view class="friend-msg">
				<view class="friend-Name">{{fridenInfo.nickName||''}}</view>
				<view class="flexr justify-between">
					<view class="friend-hoby flexr">
						<image v-if="fridenInfo.gender==1" src="../../static/new/Iconboy.png" mode=""></image>
						<image v-if="fridenInfo.gender==0" src="../../static/new/iconGirl.png" mode=""></image>
						<view class="friend-sex">{{fridenInfo.gender==0?'女':'男'}}</view>
						<view class="friend-age">
							{{myAge||0}}岁
						</view>
					</view>
					<view class="people-line">
						{{fridenInfo.nowStoreName||'手机在线'}}
					</view>

				</view>
			</view>
		</view>
		<view class="friend-detil-content" style="padding-bottom: 120rpx;">
			<view style="padding:32rpx;">
				<view class="friend-title">
					个人资料
				</view>
				<view class="friend-moreMsg flexr">
					<view>
						{{myAge}}岁
					</view>
					<view>
						{{fridenInfo.cityName||''}}
					</view>
					<view>
						{{fridenInfo.education||''}}
					</view>
					<view>
						{{fridenInfo.hobby||''}}
					</view>
				</view>

				<view class="friend-signature">
					<view class="friend-signature-title">个性签名</view>
					<view class="friend-signature-content">
						{{fridenInfo.sign|fomartSign}}
					</view>
				</view>
				<view class="friend-title">
					擅长游戏
				</view>
				<view class="friend-moreMsg flexr">
					<view v-for="item in fridenInfo.servePlayerTags">
						{{item.tagName}}
					</view>

				</view>
				<view>

					<view class="friend-title">
						个人相册
					</view>
					<view class="img-box" v-if="imgList.length">
						<image v-for="(item,index) in imgList" :key="index" :src="item.mediaUrl"
							@click="lookImg(item.mediaUrl)" mode="aspectFill"></image>
					</view>
					<view style="width: 100%;" v-else>
						<empty text="主人还没有上传图片~"></empty>
					</view>
				</view>
			</view>
		</view>
		<!--   -->
		<view class="bottom-btn flexr justify-between" v-if="btnShow">
			<view class="bottom-btn-left flexc justify-center">
				<image src="../../static/new/guanzhu.png" mode=""></image>
				<view>
					关注
				</view>
			</view>
			<view class="bottom-btn-right flexr justify-center" @click="sayHello" v-if="!fridenInfo.isSayHello">
				<image src="../../static/new/hello.png" mode=""></image> 打招呼
			</view>
			<view class="bottom-btn-right flexr justify-center" @click="sayHello" v-else>
				<image src="../../static/new/msg.png" mode=""></image> 发消息
			</view>
		</view>
		<popContent ref="popContentBox" @change='initData' :integral="integral"></popContent>
	</view>
</template>

<script>
	import popContent from "./components/popContent.vue"
	import {
		getMakeFriendsInfo,
		queryMakeFriendsMedia,
		getDict,addFriend
	} from "@/constant/friend.js"
	import {
		modelShow
	} from "@/config/common.js"
	export default {
		components: {
			popContent
		},
		data() {
			return {

				list: [],
				imgList: [],
				maxImg: 9,
				background: ['color1', 'color2', 'color3'],
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				friendId: null,
				fridenInfo: {},
				myAge: 0,
				btnShow: true,
				integral: ''

			}
		},
		filters: {
			fomartSign(str) {
				if (str && str != 'undefined') {
					return str
				} else {
					return '还没有签名～'
				}
			}
		},
		onLoad(opt) {
			this.friendId = opt.friendId || 18253
			let myId = uni.getStorageSync('customerId')
			this.btnShow = this.friendId == myId ? false : true
			this.getInfo()
			this.getMyInfo()


		},
		methods: {
			getDictData() {
				getDict('greet').then(res => {
					this.integral = res.data
				})
			},
			initData() {
				this.getInfo()
			},

			sayHello() {
				//  0 申请中 1 通过 2 未通过
				let sendMsgType = this.fridenInfo.isSayHello == 1 ? 1 : 2
				if (this.isAudit == 1) {
					if (this.fridenInfo.isSayHello == 1) {
						uni.navigateTo({
							url: '/packagePages/friend/msgDetail?friendId=' + this.fridenInfo.id +
								'&receiverNickName=' + this.fridenInfo.nickName
						})
					} else {
						// 打招呼
						addFriend({friendId:this.fridenInfo.id}).then(res=>{
							uni.navigateTo({
								url: '/packagePages/friend/msgDetail?friendId=' + this.fridenInfo.id + '&receiverNickName=' + this.fridenInfo.nickName
							})
						})
						// this.$refs.popContentBox.openPopup(this.fridenInfo.id, sendMsgType)
					}
					// this.getDictData()
				} else if (this.isAudit === 0 || this.isAudit === '0') {
					modelShow('提示', '请耐心等待资料认证通过', () => {

					}, false)
				} else if (this.isAudit == 2) {
					modelShow('提示', '资料认证未通过', () => {
						uni.navigateTo({
							url: '/packagePages/mine/authentication'
						})
					}, true, '取消', '去修改')
				} else {
					modelShow('提示', '请提交资料认证，通过后就可以打招呼啦', () => {
						uni.navigateTo({
							url: '/packagePages/mine/authentication'
						})
					}, true, '取消', '去填写')
				}

			},
			lookImg(url) {

				let imgarr = this.imgList.map(item => item.mediaUrl)

				uni.previewImage({
					urls: imgarr,
					current: url
				})
			},
			getMyInfo() {
				//  0 申请中 1 通过 2 未通过
				if (!uni.getStorageSync('isAudit')) {
					let myId = uni.getStorageSync('customerId')
					getMakeFriendsInfo(myId).then(res => {
						let info = res.data
						this.isAudit = info.isAudit
						uni.setStorageSync('isAudit', this.isAudit)

					})
				} else {
					this.isAudit = uni.getStorageSync('isAudit')
				}

			},
			getInfo() {

				getMakeFriendsInfo(this.friendId).then(res => {
					this.fridenInfo = res.data
					uni.setNavigationBarTitle({
						title: this.fridenInfo.nickName
					})
					this.myAge = this.getAge(this.fridenInfo.birthday)
				})
				queryMakeFriendsMedia(this.friendId).then(res => {
					this.imgList = res.data.makeFriendsMediaList || []
				})
			},
			changeIndicatorDots(e) {
				this.indicatorDots = !this.indicatorDots
			},
			getAge(val) {
				let currentYear = new Date().getFullYear() //当前的年份
				let calculationYear = new Date(val).getFullYear() //计算的年份
				const wholeTime = currentYear + val.substring(4) //周岁时间
				const calculationAge = currentYear - calculationYear //按照年份计算的年龄
				//判断是否过了生日
				if (new Date().getTime() > new Date(wholeTime).getTime()) {
					return calculationAge
				} else {
					return calculationAge - 1
				}
			},

		}
	}
</script>
<style>
	@import url('@/css/common.css');
</style>
<style lang="scss" scoped>
	.people-sex {
		margin-left: 30rpx;
		padding: 0 20rpx;
		height: 40rpx;
		border-radius: 21px;
		background: linear-gradient(90deg, #FF7D0B, #FFB70B);
		color: #FFF;
		text-align: center;
		font-family: PingFang SC;
		font-size: 12px;
		font-style: normal;
		font-weight: 400;
		line-height: 40rpx;
		margin-right: 20rpx;

		image {
			margin-right: 10rpx;
			width: 28rpx;
			height: 28rpx;
		}

	}

	.swiper {
		width: 100%;
		height: 600rpx;
	}

	.swiper-wrap {
		width: 100%;
		position: relative;
		height: 600rpx;
		z-index: 0;
	}

	.swiper-items {
		width: 100%;
		height: 600rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.friend-msg {
		position: absolute;
		bottom: 100rpx;
		left: 20rpx;
		width: calc(100% - 84rpx);
		padding: 0 32rpx;
	}

	.friend-Name {
		font-size: 19px;
		font-weight: bold;
		line-height: 46rpx;
		color: #fff;
		margin-bottom: 20rpx;
	}

	.friend-hoby {

		background: rgba(255, 255, 255, 0.6);
		border: 0px solid #0B0306;
		border-radius: 25rpx;
		height: 50rpx;
		// margin-right: 20rpx;
		color: #fff;
		padding: 0 20rpx;

		image {
			margin-right: 10rpx;
			width: 28rpx;
			height: 28rpx;
			margin-right: 20rpx;
		}

		.friend-sex {
			font-size: 14px;
			color: #666;
			line-height: 50rpx;
			margin-right: 20rpx;
		}

		.friend-age {
			position: relative;
			font-size: 14px;
			color: #666;
			line-height: 50rpx;
			letter-spacing: 1px;

			&:before {
				content: '';
				position: absolute;
				top: 10rpx;
				left: -10rpx;
				width: 1px;
				height: 30rpx;
				background-color: #666;
			}
		}
	}

	.people-line {
		border-radius: 80px;
		color: #fff;
		font-size: 14px;
		padding-left: 40rpx;
		padding-right: 40rpx;
		line-height: 62rpx;
		position: relative;
		background: linear-gradient(90deg, #FF7D0B, #FFB70B);
		// &:before{
		// 	content: '';
		// 	position: absolute;
		// 	top:20rpx;
		// 	left: 20rpx;
		// 	width: 8rpx;
		// 	height:  8rpx;
		// 	border-radius: 50%;
		// 	background-color: #03ef91;
		// }
	}

	.people-unline {
		background: rgba(255, 255, 255, 0.5);
	}

	.friend-detil-content {

		background-color: #fff;
		border-radius: 30rpx 30rpx 0 0;
		margin-top: -30rpx;
		z-index: 9;
		position: absolute;
		top: 570rpx;
		left: 0;
		width: 100%;
		min-height: 300rpx;

	}

	.friend-title {
		font-size: 30rpx;
		font-weight: bold;
		color: #333;
		padding: 20rpx;
	}

	.friend-moreMsg {
		padding: 20rpx 0;

		view {
			border-radius: 4px;
			line-height: 44rpx;
			font-size: 14px;
			padding: 0 30rpx;
			margin-right: 20rpx;
			background-color: #f6f6f6;
			margin-bottom: 20rpx;

			&:nth-child(1n) {
				background-color: #e5fafe;
			}

			&:nth-child(2n) {
				background-color: #eeeeff;
			}

			&:nth-child(3n) {
				background-color: #FFF1ED;
			}

			&:nth-child(4n) {
				background-color: #FFEEFF;
			}

		}
	}

	.friend-signature {
		// width: 100%;
		min-height: 128rpx;
		background: #F6F6F6;
		margin: 20rpx 0;
		padding: 20rpx;
	}

	.friend-signature-title {
		font-size: 12px;
		font-family: PingFang SC;
		// font-weight: bold;
		color: #999999;
		line-height: 28rpx;
	}

	.friend-signature-content {
		margin-top: 40rpx;
		font-size: 14spx;
		font-family: PingFang SC;
		// font-weight: bold;
		color: #333333;
		line-height: 44rpx;
	}

	.img-box {
		margin: 20rpx 0;

		image {
			width: 32%;
			height: 200rpx;
			margin-bottom: 20rpx;
			margin-left: 2%;
			border-radius: 10rpx;

			&:nth-child(3n-2) {
				margin-left: 0;
			}
		}
	}

	.bottom-btn {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #fff;
		border-top: #E7E7E7;
		height: 120rpx;

		z-index: 99;

		.bottom-btn-right {
			text-align: center;
			width: 443rpx;
			height: 76rpx;
			background: linear-gradient(135deg, #FF7C0B, #FFD90B);
			border: 0px solid #0B0306;
			border-radius: 38rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #FFFFFF;
			line-height: 76rpx;
			margin-right: 30rpx;

			image {
				width: 38rpx;
				height: 38rpx;
				margin-right: 10rpx;
			}
		}
	}

	.bottom-btn-left {
		margin-left: 60rpx;

		image {
			width: 39rpx;
			height: 38rpx;
			margin-bottom: 14rpx;
		}

		view {
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #666666;
			line-height: 40rpx;
		}
	}
</style>